<template lang="pug">
    div(class="board-container", @touchmove.stop)
        div(class="board-header")
            el-button(size="small",type="primary",@click="publish")
                span 发布
        div(class="board-body",@click="closeEmotions")
            input(
                type="text",
                placeholder="加个标题哟~",
                v-model="post.title",
                class="title",
                v-focus="titleFocus"
                v-if="titleInputVisible")
            quill-editor(
                :options="options",
                v-model="post.postContent",
                @change="change",
                ref="quill"
            )
            div
                el-button(v-if="topic && topic.name",type="text") # {{topic.name}} #

            img-list(ref="imgList",@uploaded="doPublish")

        div(class="board-footer")
            el-tag(size="mini",@click="titleInputToggle",style="margin: 0 0 10px 10px") {{titleInputVisible? '隐藏标题':'添加标题'}}

            div(class="toolbar")
                <!--点击选择表情-->
                div(class="toolbar-item")
                    a(@click="showEmotions=true")
                        i(class="iconfont icon-fabiaoqing")
                <!--点击显示话题选择面板-->
                div(class="toolbar-item")
                    a(@click="showTopicList")
                        i(class="iconfont icon-huati")
                <!--点击选择本地图片-->
                div(class="toolbar-item")
                    a(@click="chooseImg")
                        i(class="iconfont icon-tupian")
            emotion-list(v-if="showEmotions",@selected="emotionSelected")
            active-panel(:visible="topicVisible", @history-back="topicVisible=false")
                topic-selection(@selected="topicSelected", @back="topicVisible=false", ref="topic")
        loading-modal(:visible="publishing")
</template>
<script>
    import Vue from "vue";
    import VueQuillEditor from "vue-quill-editor";
    import "quill/dist/quill.core.css";
    import "quill/dist/quill.snow.css";
    import "quill/dist/quill.bubble.css";
    import Post from "./post";

    import TopicSelection from "@/pages/topic/selection";
    import Img from "./img";
    import request from "@/plugins/axios";
    import emotion from "@/components/emotion";
    import utils from "@/libs/util";

    import LoadingModal from "@/components/loading-modal";
    import BaseVue from "@/mixins/BaseVue";
    import store from "@/plugins/store";

    Vue.use(VueQuillEditor);

    Vue.component(TopicSelection.name, TopicSelection);

    Vue.component(Img.name, Img);

    var post = new Post();

    Vue.component(emotion.name, emotion);

    // 自定义类
    var Quill = VueQuillEditor.Quill;
    var Image = Quill.import("formats/image");

    Image.className = "jb-emotion";
    Quill.register(Image, true);

    Vue.component(LoadingModal.name, LoadingModal);

    export default {
        mixins: [BaseVue],
        data() {
            return {
                options: {
                    placeholder: "来吧，尽情发挥吧~",
                    modules: {toolbar: []},
                    theme: "bubble"
                },
                post: post,
                topicVisible: false,
                topic: null,
                titleInputVisible: false, // 标题输入框是否显示
                publishing: false,
                publishingText: null, // 发布中的文本
                showEmotions: false,
                titleFocus: false,
                allowBack: false,
                interval: null,
            };
        },
        beforeRouteLeave(to, from, next) {
            if (this.topicVisible) {
                // 显示选择话题面板时，点击后退按钮，这时用户的意图是关闭面板，不是回退
                this.topicVisible = false;
                return;
            }
            if (this.showEmotions) {
                // 显示选择表情面板时，点击后退按钮，这时用户的意图是关闭面板，不是回退
                this.showEmotions = false;
                return;
            }
            next();
        },
        methods: {
            change: function (arg) {
            },
            topicSelected(topic) {
                this.topicVisible = false;
                this.topic = {name: topic.topicName, value: topic.topicId};
                this.post.topicId = topic.topicId;
            },
            titleInputToggle() {
                this.titleInputVisible = !this.titleInputVisible;
                if (this.titleInputVisible) this.titleFocus = true;
            },
            chooseImg() {
                this.closeEmotions();
                this.$refs.imgList.chooseImg();
            },
            verify() {
                if (!this.post.topicId) {
                    this.toast("请选择话题");
                    return false;
                }
                if(this.post.postContent && this.post.postContent.length>2000){
                    this.toast("文字数量或表情数量过多，请调整!");
                    return false;
                }

                return true;
            },
            publish() {
                if (!this.verify()) return;
                var images = this.$refs.imgList.getImageLength();
                if (images > 0) {
                    this.publishingText = "上传文件中...";
                    this.publishing = true;
                    this.$refs.imgList.uploadImages();
                } else {
                    this.doPublish();
                }
            },
            doPublish(serverIds) {
                serverIds = serverIds || [];
                var data = {serverIds: serverIds};
                data = Object.assign(data, this.post);
                this.publishing = true;
                this.publishingText = "正在发布....";
                var options = {data: data, url: "forum/publish/post", method: "post"};
                var vm = this;
                request(options)
                    .then(() => {
                        vm.publishing = false;
                        vm.publishingText = null;
                        vm.clearPostCache();
                        this.toast("发布成功", true);
                        history.back();
                    })
                    .catch(() => {
                        vm.publishing = false;
                        vm.publishingText = null;
                    });
            },
            closeEmotions() {
                this.showEmotions = false;
            },
            showTopicList() {
                this.closeEmotions();
                this.topicVisible = true;
            },
            onSelection() {
            },
            emotionSelected(emotion) {
                var quill = this.$refs.quill.quill;

                var selection = quill.getSelection(() => {
                });
                var index = selection ? selection.index : quill.getLength();
                var res = quill.insertEmbed(index, "image", emotion.small_url);
                quill.setSelection({index: index + 1, length: 0});
                quill.blur();
            },
            clearPostCache() {
                clearInterval(this.interval );
                utils.store.set("post_draf", {});
            },
            closeTopicPanel(){
                this.$refs.topic.back();
            }
        },
        directives: {
            focus: {
                inserted(el, {value}) {
                    if (value) el.focus();
                }
            }
        },
        beforeDestroye(){
            clearInterval(this.interval );
        },
        mounted() {
            const vm = this;

            let data = utils.store.get("post_draf");
            if (data) {
                this.post = Object.assign({}, data.post);
                this.topic = Object.assign({}, data.topic);
            }

            // 3秒帖子数据缓存到cookies
            this.interval = setInterval(() => {
                utils.store.set("post_draf", {
                    post: vm.post,
                    topic: vm.topic
                });
            }, 3000);

        }
    };
</script>
<style lang="less" scoped>
    @import "../../common/common.less";

    .board-container {
        background-color: white;
        min-height: calc(100vh);
    }

    .ql-editor,
    .ql-container {
        height: none;
    }


    body {
        margin: 0px 8px;
    }

    .board-container {
        display: flex;
        flex-direction: column;
        height: 100vh;
        overflow: hidden;
    }

    .board-head,
    .board-footer {
        flex: none;
    }

    .board-body {
        flex: auto;
        overflow-y: auto;
        padding: 8px;
    }

    .board-header {
        text-align: right;
        border-bottom: 1px solid #f0f0f0;
        margin: 0 -8px 0 -8px;
        padding-right: 10px;
        height: 45px;
        line-height: 45px;
        font-size: 16px;
    }

    .board-header button {
        font-size: 15px;
    }

    .title {
        border: none;
        padding: 5px 8px 5px 15px;
        width: 100%;
        font-size: 16px;
    }

    .img-list {
        text-align: left;
    }

    .toolbar {
        padding: 8px 0;
        border-top: 1px solid #f0f0f0;
        border-bottom: 1px solid #f0f0f0;
        display: flex;
    }

    .toolbar-item {
        flex: 1;
        text-align: center;
    }

    .toolbar-item a {
        display: block;
    }

    .toolbar-item a i {
        font-size: 30px;
    }

    .toolbar-item a i.icon-fabiaoqing {
        color: #ff6600;
    }

    .toolbar-item a i.icon-tupian {
        color: #339999;
    }

    .img-list .el-upload--picture-card,
    .img-list .el-upload-list__item {
        width: 25vw;
        height: 25vw;
        line-height: 25vw;
    }
</style>
<style lang="less">
    .jb-emotion {
        width: 24px;
    }
</style>
